<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jQuery.typeSearch</title>
		<link rel="stylesheet" type="text/css" href="css/typesearch.css">
		<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
		<script type="text/javascript" src="js/jquery.typesearch.js"></script>
		<script type="text/javascript">
			$(function(){ // it's domready
				$('.search').typeSearch();
			});
		</script>

		<style type="text/css">
			body{
				font-family: helvetica, arial, sans-serif;
				font-size: .9em;
			}
			.search{
				margin: 10px; /* give a little breathing space */
			}
			.wider{
				width: 300px;
			}
		</style>

	</head>
	<body>
	
		<h1>jQuery.typeSearch.js</h1>
		
		<h2>Code</h2>
		<p>HTML:</p>
		<pre><code>&lt;input type=&quot;text&quot; class=&quot;search&quot; value=&quot;&quot;&gt;</code></pre>
		<p>JavaScript:</p>
		<pre><code>$('.search').typeSearch();</code></pre>
		
		<h2>Files</h2>
		<ul>
			<li><a href="http://jquery.com/">jQuery library</a></li>
			<li><a href="js/jquery.typesearch.js">jquery.typesearch.js</a></li>
			<li><a href="css/typesearch.css">typesearch.css</a></li>
			<li>images
				<ul>
					<li><a href="images/searchfield_repeat.png">searchfield_repeat.png</a></li>
					<li><a href="images/searchfield_leftcap.png">searchfield_leftcap.png</a></li>
					<li><a href="images/searchfield_rightcap.png">searchfield_rightcap.png</a></li>
					<li><a href="images/close.gif">close.gif</a></li>
				</ul>
			</li>
		</ul>
		
		<h2>Example</h2>
		<p>Searchbar 1</p>
		<input type="text" class="search" value="" name="test" id="test">
		<p>Searchbar 2</p>
		<input type="text" class="search wider" value="Already a value here">

	</body>
</html>
